<template>
  <view>
    <view class="container" style="background: #fff;">
      <view class="form-item">
        <label>预约类型</label>
        <picker mode="selector" @change="onAppointmentTypeChange" :value="selectedAppointmentType" :range="appointmentTypes">
          <view class="picker">{{ selectedAppointmentTypeLabel }}</view>
        </picker>
      </view>
      <view class="form-item">
        <label>预约时间</label>
        <view class="example-body">
          <uni-datetime-picker type="date" v-model="appointmentTime" />
        </view>
      </view>
      <view class="form-item">
        <label>备注</label>
        <input type="text" v-model="notes" placeholder="请输入备注" />
      </view>
      <view class="form-item">
        <button type="primary" @click="submitAppointment">提交预约</button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState('m_user', ['userId']),
    selectedAppointmentTypeLabel() {
      return this.appointmentTypes[this.selectedAppointmentType] || '';
    }
  },
  data() {
    return {
      selectedAppointmentType: 0,
      appointmentTypes: ['疫苗预约', '美容预约', '体检预约'],
      appointmentTime: '',
      notes: '',
    };
  },
  methods: {
    onAppointmentTypeChange(e) {
      this.selectedAppointmentType = e.detail.value;
    },
    async submitAppointment() {
      if (!this.userId) {
        uni.showToast({ title: '请先登录！', icon: 'none' });
        return;
      }
  if (!this.appointmentTime) {
    uni.showToast({ title: '请选择预约时间！', icon: 'none' });
    return;
  }
      const appointment = {
        userId: this.userId,
        appointmentType: this.selectedAppointmentTypeLabel,
        appointmentTime: this.appointmentTime,
        notes: this.notes,
      };
		console.log('预约信息：',appointment)
      try {
        const res = await uni.$http.post('/wx/appointments', appointment);
        uni.showToast({ title: '预约成功！', icon: 'success' });
		  this.selectedAppointmentType = 0;
		    this.appointmentTime = '';
		    this.notes = '';
      } catch (error) {
        console.error(error);
        uni.showToast({ title: '预约失败！请联系客服。', icon: 'none' });
      }
    }
  }
};
</script>

<style lang="scss">
	.container {
		padding: 20px;
	}

	.form-item {
		margin-bottom: 20px;
	}

	label {
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
	}

	.picker {
		border: 1px solid #ddd;
		padding: 10px;
		border-radius: 5px;
	}

	input {
		width: 100%;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}

	button {
		width: 100%;
		padding: 10px;
		background-color: #1aad19;
		color: white;
		border: none;
		border-radius: 5px;
	}
</style>